<template>
  <div>
    <el-input v-model="icon">
      <template #append>
        <el-button @click="show = true">选择</el-button>
      </template>
    </el-input>
    <div v-if="icon" class="text-48px bg-white size-80px flex items-center justify-center mt1" style="border: 1px solid #ccc">
      <UniIcons :type="icon" :size="48"></UniIcons>
    </div>
    <el-dialog v-model="show" title="选择图标" width="1000px">
      <el-row :gutter="20">
        <el-col v-for="key in fontData.length" :key="key" :span="2" @click="updateIcon(fontData[key]?.font_class)">
          <div class="hover:border-blue border-1px border-solid border-white cursor-pointer hover:color-blue">
            <uni-icons :type="fontData[key]?.font_class" :size="36" color="#666" class="p2"></uni-icons>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { fontData } from '@/components/UniIcons/uniicons_file_vue.js'

defineOptions({
  name: 'DkUniIconsInput'
})
const show = ref(false)
const props = defineProps({
  modelValue: {
    default: '',
    type: String
  }
})

const emit = defineEmits(['update:modelValue'])
const icon = ref(props.modelValue)

const updateIcon = (value: string) => {
  icon.value = value
  emit('update:modelValue', value)
  show.value = false
}
</script>

<style>
.dk-icon {
  button {
    font-size: 30px !important;
  }
}
</style>
